<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/http.js"></script>
    <script src="../lib/jquery-3.4.1.js"></script>
</head>

<body>
    <div class="top-box">
        <div class="wrap">
            <a href="" class="top-logo"></a>
            <div class="top-nav-box">
                <span>发现音乐</span>
                <span>我的音乐</span>
                <span>朋友</span>
                <span>商城</span>
                <span>音乐人</span>
                <span>下载客户端</span>
            </div>
            <div class="top-hot">

            </div>
            <div class="top-search-box">
                <div class="top-search-img"></div>
                <input type="text" placeholder="音乐/视频/电台/用户" class="search" value="雪花火">
            </div>
            <div class="top-author-box">
                创作者中心
            </div>
            <div class="top-info-box">
                <span class="top-info">登陆</span>
                <div class="top-info-other"></div>
            </div>
        </div>

    </div>
    <div class="main-box">
        <div class="main-content-box">
            <!-- <div class="search-other-box">
                搜索"雪花火"，找到 <span>12</span> uld大
            </div> -->
            <div class="musics-box">
                <!-- <div class="music-box">
                    <div class="music-play"></div>
                    <div class="music-song">

                        <div class="music-name"></div>
                        <div class="music-alias"></div>
                    </div>
                    <div class="music-td"></div>
                    <div class="music-author"> </div>
                    <div class="music-album"> </div>
                    <div class="music-time"></div>
                </div> -->
            </div>
        </div>
    </div>


    <script>
        var value = $(".search").val();
        var music = [];
        var box = document.getElementsByClassName("main-content-music-box");
        var data = {
            value,
            number: 10,
        }
        data.value = this.value;
        http({
            callback: getMusic,
            data
        })
        // $(window).scroll(function () {
        //     if (onReachBottom) {
        //         data.number += 10;
        //         http({
        //             callback: getMusic,
        //             data
        //         })
        //     }
        // })

        function getMusic(res) {


            var songs = res.result.songs;
            var searchAbout = `<div class="search-other-box">
                搜索"${data.value}"，找到 <span>${songs.length}</span> 首单曲
            </div>`;
            $(".main-content-box").prepend(searchAbout);
            $(".main-content-box").append(`<div class="musics-box"> </div>`);

            duqu(songs);
        }
        $(".search").keydown(function (event) {
            if (event.keyCode == 13) {
                data.value = $("input").val();
                http({
                    callback: getMusic,
                    data,
                })
            }
        })
    </script>
</body>

</html>